<template>
  <div class="appMain" :style="{ height: autoHeight }">
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <keep-alive :include="includes">
          <component :is="Component" :key="$route.path"></component>
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts" name="AppMain">
import { useSettingStore } from "@/store/setting"
import { useTagsViewStore } from "@/store/tagsView"
import variables from "@/style/variables.module.scss"

const { cacheViews } = storeToRefs(useTagsViewStore())

const includes = computed(() => {
  return cacheViews.value as string[]
})

const settingStore = useSettingStore()
const autoHeight = computed(() => {
  return (
    `calc(100vh - ${
      settingStore.otherSettings.isShowTagsView
        ? parseInt(variables.tagsViewHeight) + parseInt(variables.navBarHeight)
        : parseInt(variables.navBarHeight)
    }` + "px)"
  )
})
</script>

<style scoped lang="scss">
.appMain {
  @apply overflow-hidden pos-relative;
}

.fade-enter-active,
.fade-leave-active {
  @apply transition-all duration-500 pos-absolute;
}

.fade-enter-from {
  @apply opacity-0 translate-x-[50px];
}
.fade-leave-to {
  @apply opacity-0 translate-x-[-50px];
}
</style>
